<template>
  <div>
    <el-dialog
      class="add-org-dialog"
      title="新增机构"
      :visible.sync="orgDialog.showDialog"
      width="550px"
    >
      名称：
      <el-input class="org-input" placeholder="机构名称" v-model="orgDialog.name"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="orgDialog.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="addOrg">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      class="edit-org-dialog"
      title="修改机构"
      :visible.sync="orgDialogEdit.showDialog"
      width="550px"
    >
      名称：
      <el-input class="org-input" placeholder="机构名称" v-model="orgDialogEdit.name"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="orgDialogEdit.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="editOrg">确 定</el-button>
      </span>
    </el-dialog>
    <div class="button-row">
      <el-button type="primary" @click="openDialog">新增机构</el-button>
      <el-input placeholder="请输入名称" v-model="searchWord" class="search-input">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <el-table :data="orgList" style="width: 100%">
      <el-table-column label="序号" width="100" prop="index" />
      <el-table-column label="机构名称" width="220" prop="name" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="upForward(scope.$index, scope.row)">上移</el-button>
          <el-button size="mini" type="success" @click="downForward(scope.$index, scope.row)">下移</el-button>
          <el-button size="mini" @click="showEditDialog(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteOrg(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  Button,
  Dialog,
  Input,
  Table,
  TableColumn,
  Pagination
} from "element-ui";
import {
  addScoreOrg,
  getScoreOrgList,
  upForwardOrg,
  downForwardOrg,
  editScoreOrg,
  deleteScoreOrg
} from "@/api/score.js";
export default {
  name: "score-org",
  components: {
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Input.name]: Input,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn
  },
  data() {
    return {
      orgDialog: {
        showDialog: false,
        name: null
      },
      orgDialogEdit: {
        showDialog: false,
        id: null,
        name: null
      },
      searchWord: null,
      orgList: []
    };
  },
  mounted() {
    this.refreshList();
  },
  methods: {
    openDialog() {
      this.orgDialog.name = null;
      this.orgDialog.showDialog = true;
    },
    deleteOrg(index, row) {
      this.$confirm("此操作将永久删除机构, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteScoreOrg(row.id)
            .then(res => {
              this.refreshList();
            })
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    },
    refreshList() {
      getScoreOrgList({
        searchWord: this.searchWord
      })
        .then(res => {
          res.forEach((item, index) => (item.index = index + 1));
          this.orgList = res;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    addOrg() {
      addScoreOrg(this.orgDialog.name)
        .then(res => {
          this.orgDialog.name = null;
          this.orgDialog.showDialog = false;
          this.refreshList();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    upForward(index, row) {
      upForwardOrg(row.id)
        .then(res => {
          this.refreshList();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    downForward(index, row) {
      downForwardOrg(row.id)
        .then(res => {
          this.refreshList();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    showEditDialog(index, row) {
      this.orgDialogEdit.id = row.id;
      this.orgDialogEdit.name = row.name;
      this.orgDialogEdit.showDialog = true;
    },
    editOrg() {
      editScoreOrg({
        id: this.orgDialogEdit.id,
        name: this.orgDialogEdit.name
      })
        .then(res => {
          this.orgDialogEdit.showDialog = false;
          this.refreshList();
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  },
  watch: {
    searchWord() {
      this.refreshList();
    }
  }
};
</script>
<style lang="stylus" scoped>
.add-org-dialog {
  .org-input {
    width: 400px;
  }
}

.edit-org-dialog {
  .org-input {
    width: 400px;
  }
}

.button-row {
  .search-input {
    width: 400px;
  }
}
</style>